<template>
	<view class="container">
		<view class="top-section" :style="{ paddingTop: statusBarHeight }">
			<view class="nav d-flex px-4 a-center font-lg text-light" :style="{ height: navBarHeight }"></view>
			<view class=" px-3  d-flex  flex-row a-center" @click="hanglgUserFn">
				<view class="u-skeleton-circle">
					<image class="imagesBox" style=" background-color: #eeeeee;" :src="userInfo.avatarUrl"></image>
				</view>
				<view class="pl-2 u-skeleton-rect">
					<view class="font-md font-weight text-light text-l">{{ userInfo.realName }}</view>
					<view class="mt-1 font text-light font-weight">{{ userInfo.companyName }}</view>
				</view>
			</view>
			<view class="d-flex  a-center w-100 j-sa navBox">
				<!-- u-m-t-40 -->
				<view class=" tabsBox">
					<u-tabs
						:font-size="34"
						:height="90"
						inactive-color="#FFF"
						active-color="#FFF"
						:bar-width="60"
						:list="list"
						:is-scroll="false"
						:current="current"
						@change="change"
					></u-tabs>
				</view>
				<view class="lineBox"></view>
				<view class="infoMap u-skeleton-circle" @click="hanglgMapFn">
					<image
						class="u-skeleton-circle imagesBox"
						style="width: 48rpx; height: 48rpx;"
						:src="getStaticFilePath('ico-dt.png')"
					></image>
					<view class="font text-light pt mapText">信息地图</view>
				</view>
			</view>
		</view>
		<view class="middle-section bg-grey">
			<view v-if="current == 0"><information-tracking></information-tracking></view>
			<view v-if="current == 1"><i-posted></i-posted></view>
			<view v-if="current == 2"><warning-info></warning-info></view>
		</view>
		<view class="bottom-section"><tabBar></tabBar></view>
		<user-box ref="userBox"></user-box>
	</view>
</template>

<script>
import informationTracking from './components/informationTracking.vue';
import iPosted from './components/iPosted.vue';
import warningInfo from './components/warningInfo.vue';
import userBox from '@/components/userBox.vue';
export default {
	components: { informationTracking, iPosted, warningInfo, userBox },
	data() {
		return {
			userInfo: {},
			statusBarHeight: '',
			navBarHeight: '',
			list: [
				{
					index: '1',
					name: '经营跟踪'
				},
				{
					index: '2',
					name: '我发布的'
				},
				{
					index: '3',
					name: '经营预警'
				}
			],
			current: 0
		};
	},
	onReady() {
		var that = this;
		uni.getStorage({
			key: 'userInfo',
			success: function(res) {
				that.userInfo = res.data;
			}
		});
	},
	onLoad() {
		if (this.$Route.query.current) {
			this.current = this.$Route.query.current;
		}
		/*#ifdef MP*/
		let that = this;
		uni.getSystemInfo({
			success: function(info) {
				// 屏幕高度
				let screenHeight = info.screenHeight;
				// 屏幕宽度
				let screenWidth = info.screenWidth;
				// 胶囊高度
				//状态栏高度
				that.statusBarHeight = info.statusBarHeight * 2 + 'rpx';
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				let navBarHeight = menuButtonInfo.bottom + menuButtonInfo.top - screenHeight;
				that.navBarHeight = navBarHeight + screenHeight - info.statusBarHeight + 'rpx';
			}
		});
		/*#endif*/
	},
	options: {
		styleIsolation: 'shared' // 解除样式隔离
	},
	methods: {
		change(index) {
			this.current = index;
		},
		hanglgMapFn() {
			this.$Router.push({
				/*#ifdef H5*/
				path: '/mapPages/pages/map/map',
				/*#endif*/
				/*#ifdef MP*/
				path: '/mapPages/pages/wxmap/index'
				/*#endif*/
			});
		},
		//点击头像
		hanglgUserFn() {
			this.$refs.userBox.innUser();
			this.isShowInfo = true;
		},
		//退出
		loginOutFn() {
			uni.clearStorage();
			this.$Router.replaceAll({
				name: 'login'
			});
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
}

.top-section {
	height: 570rpx;
	text-align: center;
	background-image: url($custom-bg-img-url+'headBg.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: relative;
	// z-index: 1;
	/* #ifdef  H5 */
	.nav {
		padding-top: 50rpx;
	}
	/* #endif */

	.navBox {
		// margin-top: -400rpx;
		.infoMap {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 50rpx;
			.mapText {
				// z-index: 10;
			}
		}
		.lineBox {
			height: 70rpx;
			background: linear-gradient(
				180deg,
				rgba(188, 219, 255, 0) 1.198%,
				rgb(243, 245, 249) 50.714%,
				rgba(166, 205, 251, 0) 100%
			);
			width: 2rpx;
			// z-index: 10;
			margin-top: 40rpx;
		}
		::v-deep .u-tabs {
			background: rgb(255, 255, 255, 0) !important;
		}
		.tabsBox {
      margin-top: 40rpx;
			width: 76%;
		}
	}
}

.middle-section {
	flex: 1;
	overflow-y: auto;
	// background-color: #fff;
	margin-top: -16%;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	position: relative;
	// z-index: 2;
	// padding-bottom: 50px;
}

.bottom-section {
	// flex: 0 0 50px;
	height: 50px;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	// z-index: 3;
}
</style>
